<template>
	<view class="page">
		<tab-row :menus="menus" @change="onChangeMenuItem"></tab-row>
		<page-list class="list-box" :api="order.getPageListAsync" :searchParams="searchParams">
			<template #item="{item}">
				<order-item :item="item" @click.stop="onTapItem(item)"></order-item>
			</template>
		</page-list>
	</view>
</template>

<script lang="ts" setup>
	import { ref, } from 'vue';
	import OrderItem from '@/order/components/order-item.vue';
	import { order } from '@/mock/order';
	const searchParams = ref({
		menuName: '全部',
	});
	const menus = ref(["全部", "待付款", "待收货", "已完成", "已取消"]);

	const onChangeMenuItem = (index : number) => {
		searchParams.value.menuName = menus.value[index];

	}
	const onTapItem = (item : any) => {
		uni.navigateTo({
			url: '/order/pages/order/detail/order-detail?id=' + item.id,
		});
	}
</script>

<style lang="scss" scoped>
	.tab-row {
		position: sticky;
		left: 0;
		top: 0;
	}

	.list-box {
		// height: calc(100vh - 46px);
		// overflow-y:scroll;
		// box-sizing: border-box;
		padding: var(--page-padding);
	}
</style>